<script lang="ts" setup>
import { echart1, echart2 } from './echarts';

import { nextTick, ref } from 'vue';
import * as echarts from 'echarts';

interface ICard {
  title: string;
  price: number;
  icon: string;
  iconColor: string;
  totalTitle: string;
  totalNumber: number;
}
const cards = ref<ICard[]>([
  {
    title: '人数',
    price: 12345,
    icon: 'fab fa-42-group',
    iconColor: 'text-violet-400 ',
    totalTitle: '总人数',
    totalNumber: 12345
  },
  {
    title: '销售额',
    price: 12345,
    icon: 'fab fa-42-group',
    iconColor: 'text-red-400',
    totalTitle: '总销售额',
    totalNumber: 12345
  },
  {
    title: '订单数',
    price: 12345,
    icon: 'fab fa-42-group',
    iconColor: 'text-green-400',
    totalTitle: '总订单数',
    totalNumber: 12345
  },
  {
    title: '评论数',
    price: 12345,
    icon: 'fab fa-42-group',
    iconColor: 'text-yellow-400',
    totalTitle: '总评论数',
    totalNumber: 12345
  }
]);

nextTick(() => {
  echarts.init(document.getElementById('eChart1') as HTMLElement).setOption(echart1);
  echarts.init(document.getElementById('eChart2') as HTMLElement).setOption(echart2);
});
</script>
<template>
  <div>
    <div class="grid md:grid-cols-4 gap-3">
      <el-card
        shadow="hover"
        :body-style="{ padding: '20px' }"
        v-for="(card, index) of cards"
        :key="index"
        class="cursor-pointer"
      >
        <template #header>
          <div class="flex justify-between items-center">
            {{ card.title }}
            <el-tag type="danger" size="small" effect="dark">月</el-tag>
          </div>
        </template>
        <section class="flex justify-between items-center">
          <span class="text-3xl">${{ card.price }}</span>
          <i class="text-4xl" :class="[card.icon, card.iconColor]"></i>
        </section>
        <section class="text-base mt-6 flex justify-between">
          {{ card.totalTitle }}
          <span>{{ card.totalNumber }}人</span>
        </section>
      </el-card>
    </div>
    <div class="grid md:grid-cols-2 gap-3 py-3 mt-5">
      <el-card>
        <template #header>
          <div>用户统计</div>
        </template>
        <div id="eChart1" class="h-72 w-full"></div>
      </el-card>
      <el-card>
        <template #header>
          <div>销售统计</div>
        </template>
        <div id="eChart2" class="h-72 w-full"></div>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
<script lang="ts">
export default {
  route: { name: 'home' }
};
</script>
